<template>
	<view>
		<view class="tabbar"></view>
		<uni-nav-bar  left-icon="left-nav"  title="有播分享" @clickLeft="back" />
		<view class="content display-flex flex-column">
			
			<view class="menu">
				<view @click="selectTab(category.category_id)" :class="{active:categoryId ===index}" class="select "
					v-for="(category,index) in categoryList" :key='index'>{{category.category_name}}</view>
			</view>
			<view class="video_list">
				<view class="video_item shadow" v-for="(item,index) in  albumList" :key='index'
					@tap="goto(item.album_id)">
					<image class="video_cover" :src="item.cover_url |defaultImg" mode=""></image>
					<view class="video_detail">
						<view class="video_title">{{item.album_title}} </view>
						<view class="video_content">{{item.album_intro}}</view>
						<view class="video_time">{{item.updated_at}}</view>
					</view>
				</view>
			</view>

			<!-- <no-data v-if="!albumList || albumList.length == 0"></no-data> -->
		</view>
	</view>
</template>

<script>
	import Header from "../component/tutorial_header.vue";
	import apis from "@/api"
	import noData from '../component/no-data.vue';
	export default {
		components: {
			Header,
			noData,
		},
		data() {
			return {
				header_title: "父母课堂 ",
				parent_name: "尊敬的",
				header_content: "科学根据宝宝当前月龄进行学习～",
				categoryList: [],
				albumList: [],
				categoryId: 0,
				page: 0,
				total: 0,
				userInfo: '',
				currentCustomer: '',
				customer_name: ''
			}
		},
		filters: {
			defaultImg(val) {
				if (!val) {
					return 'https://storage.ganorglobal.com/miniapp-service/static/course_icon.jpg'
				}
			}
		},
		onLoad() {
			this.categoryId = 0
			this.tutorialCategories();
			this.getAlbumList();
			this.getSchoolSetting();
		},
		onShow() {

			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					tabbarIndex: 2
				})
			};
			this.userInfo = getApp().globalData.userInfo;
			this.currentCustomer = getApp().globalData.currentCustomer;
			this.customer_name = this.currentCustomer.stu_name
		},
		//下拉刷新
		onReachBottom() {
			if (this.total && this.albumList.length >= this.total) {
				uni.showToast({
					title: '没有更多啦',
					icon: 'none'
				})
				return
			}
			this.getAlbumList(this.categoryId)
		},
		methods: {
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			goDetails(url) {
				uni.navigateTo({
					url: url
				})
			},
			getSchoolSetting() {
				// 是否关闭儿歌故事  0，不开启 1、开启
				// if(getApp().globalData.isShowSinglePage.parent_class == 0){
				// 	let newTabbar = this.$mp.page.getTabBar().data.tabbar;
				// 	newTabbar.splice(3,1);
				// 	this.$mp.page.getTabBar().setData({
				// 	  tabbar: newTabbar
				// 	});	
				// }
			},

			tutorialCategories() {
				const args = {}
				this.common.http.request(apis.tutorialCategories, 'post', args, res => {
					if (res.data.code == 0) {
						this.categoryList = [{
							category_id: 0,
							category_name: '全部'
						}, ...res.data.data]
					}
				})
			},
			selectTab(categoryId) {
				this.page = 0
				this.albumList = []
				this.categoryId = categoryId
				this.getAlbumList()
			},
			getAlbumList() {

				this.page++
				const args = {
					category_id: this.categoryId,
					page: this.page,
					limit: 15
				}
				uni.showToast({
					icon: 'none',
					title: '加载中请稍后'
				})
				this.common.http.request(apis.albumList, 'post', args, res => {
					uni.hideToast()
					if (res.data.code == 0) {
						this.total = res.data.data.total
						if (this.albumList.length) {
							this.albumList = [this.albumList, res.data.data.list].flat()
						} else {
							this.albumList = res.data.data.list
						}
					}
				})
			},
			goto(albumId) {
				uni.navigateTo({
					url: '../course/course?albumId=' + albumId
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.tabbar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: white;
	}
	.content {
		width: 100vw;
		box-sizing: border-box;
		padding: 30rpx;
		margin-bottom: 120rpx;

		.type-card {
			width: 210rpx;
			height: 100rpx;
			border-radius: 10rpx;
			background-color: #fff;
			box-shadow: 0 0 15rpx rgba(189, 194, 213, 0.5);

			.title {
				color: #000000;
				font-size: 26rpx;
				line-height: 26rpx;
				margin-left: 10rpx;
			}

			.img {
				width: 48rpx;
				height: 48rpx;
			}
		}

		.menu {
			height: 152rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.select {
				font-size: 26rpx;
				font-family: PingFangSC-Medium, PingFang SC;
				font-weight: 500;
				color: #C7C7CC;
				display: flex;
				align-items: center;
				justify-content: center;
				width: 218rpx;
				height: 60rpx;
			}

			.active {
				background: #64B7A5;
				border-radius: 30rpx;
				color: #fff;
			}
		}

		.video_list {
			.video_item {
				height: 190rpx;
				padding: 20rpx;
				margin-bottom: 30rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: white;
				.video_cover {
					width: 168rpx;
					height: 130rpx;
				}

				.video_detail {
					height: 150rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;

					.video_title {
						height: 45rpx;
						font-size: 32rpx;
						font-family: PingFangSC-Semibold, PingFang SC;
						font-weight: 600;
						color: rgba(51, 51, 51, 1);
						line-height: 45rpx;
						letter-spacing: 2rpx;
					}

					.video_content {
						height: 37rpx;
						font-size: 26rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: rgba(51, 51, 51, 1);
						line-height: 37rpx;
						letter-spacing: 1rpx;
						width: 440rpx;
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.video_time {
						height: 30rpx;
						font-size: 22rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						font-weight: 400;
						color: #8E8E93;
						line-height: 30rpx;
						letter-spacing: 1rpx;
					}
				}
			}
		}
	}
</style>
